<template>
  <div class="full-page">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" fixed />
    <div class="con">
      <router-link
        :to="{ name: item.name }"
        class="box"
        v-for="item in list"
        :key="item.title"
      >
        <p>{{ item.title }}</p>
        <span class="tubiao"></span>
      </router-link>

      <van-button type="danger" block class="btn" @click="quit"
        >退出登录</van-button
      >
    </div>
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>
    
<script>
import { NavBar, Button, Toast, Dialog } from "vant";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      list: [
        {
          title: "菜谱统计",
          name: "statistics",
        },
        {
          title: "系统权限",
          name: "jurisdiction",
        },
        {
          title: "隐私政策",
          name: "policy",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    quit() {
      Dialog.confirm({
        title: "确定退出吗",
      })
        .then(() => {
          localStorage.removeItem("token");
          this.$store.commit("user/setIsLogin", false);
          Toast("退出登录");
          this.$router.replace("/login");
        })
        .catch(() => {});
    },
  },
};
</script>
    
<style scoped lang="scss">
.full-page {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 1;
  overflow: hidden;
  .con {
    height: calc(100% - 50px);
    overflow: auto;
    padding-bottom: 21.3333vw;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      display: none;
    }
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5.3333vw;
      border-bottom: 1px #ccc solid;
      color: #000;
      .tubiao {
        width: 10px;
        height: 10px;
        border-left: 2px #ccc solid;
        border-top: 2px #ccc solid;
        transform: rotate(135deg);
      }
    }
    .btn {
      margin-top: 50px;
    }
  }
}
</style>